<html>
<head>
<title>GWT Masterview library documentation: Styling the tables</title>
<link href="resources/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="resources/SyntaxHighlighter.css" type="text/css" />
<script src="resources/shCore.js"></script>
<script src="resources/shBrushJava.js"></script>
<script>
    window.onload = function() {
      dp.SyntaxHighlighter.HighlightAll("code");
    }
</script>

</head>
<body>
<div id="header">
<h1>Masterview library 0.1</h1>
</div>

<div id="navigation">
<h2>Choose topic:</h2>
<ul>
	<li><a href="index.html">Overview</a></li>
	<li><a href="basic-usage.html">Getting started guide</a></li>
	<li><a href="themes.html">Styling the tables</a></li>	
	<li><a href="filtering-expressions.html">Filtering</a></li>
</ul>
</div>

<div id="content">
<h1>Hot to use default Masterview themes or create your own</h1>
<h2>Using default themes</h2>
<p>To use one of default Masterview themes you need to include this line in your GWT Module 
xml file (don't forget to place masterview.jar on your project's classpath):</p>
<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
<stylesheet src="<<Theme name>>.css"/>   
</textarea> 
where the "Theme name" is the name of the theme you wish to use. Currently there are 2 themes available:
<ul>
	<li>Original Masterview theme. Included with <code>stylesheet src="masterview-default.css"</code> declaration 
	in your GWT module. Looks like this:
	<div style="text-align:center;">
		<img src="resources/albums_screenshot.png"/>
	</div>
	</li>
	<li>The "appfusish" theme (inspired by <a href="http://appfuse.org">AppFuse</a> framework default look-and-feel). 
	Included with <code>stylesheet src="masterview-appfusish.css"</code> declaration in your GWT module. Looks like this:
	<div style="text-align:center;">
		<img src="resources/appfusish_screenshot.png"/>
	</div>
	</li>
</ul>
<h2>Building your own theme</h2>
<p>To build your own theme you need to write a css file and include it in your GWT module with above-mentioned command:
stylesheet src="your-masterview-theme.css".
Of couse you also need to specify certain css style rules:</p>
<textarea name="code" class="css" rows="15" cols="100">
.masterview-grid { the table's main style }
.masterview-grid-header-cell { the table's header cell style }
.masterview-grid-row-cell { the table's body cell style (in which item's property is displayed) }
.masterview-grid-filter { the style of the row in which filter textboxes are displayed }
.masterview-grid-filter-textbox { the style of the textboxes in which filter expressions are typed }
.masterview-grid-header { the table's header row style }
.masterview-grid-sorted-asc { this style replaces .masterview-grid-header-cell style when the column 
								with this header cell is sorted in ascending order }
.masterview-grid-sorted-desc { this style replaces .masterview-grid-header-cell style when the column 
								with this header cell is sorted in descending order }
.masterview-grid-row-even { the table's style for even rows }
.masterview-grid-row-odd { the table's style for odd rows }
.masterview-grid-row-highlight { this style replaces styles for even or odd row when the row is hovered }
.masterview-pager { the style of pager widget - a container with navigation bar in which table is placed }
.masterview-pager-navigation { the pager's navigation bar style }
.masterview-pager-status { the style of pager's status label (in the navigation bar to the right }
</textarea> 

<p>Changing icons for navigation buttons is harder a bit, because these icons are combined
by GWT in a bundle during compile-time, and so they are placed in a <i>org.masterview.user.client.ui.bundle</i> 
package. You can't remove them without modifying the sources and recompiling. But you can create your own java package,
place your images there and create your own Image Bundle.</p>

<p>For example, you have</p>
TODO: write more.
</div>
</body>
</html>